<template>
	<view :style="navbarBackground">
		<view class="status_bar">
		</view>
		<view style="height: 100rpx;" class="padding my-faj-space-between">
			<view style="display: flex;justify-content: center;align-items: center;">
				<view class="cu-avatar round" :style="{'background-image':'url('+loginUserInfo.avatar+')'}" style="margin-right: 24rpx;"></view>
				<view>
					<view style="font-size: 32rpx;">{{loginUserInfo.nickName}}</view>
					<view style="display: flex;align-items: center;font-size: 22rpx;">
						<view style="width: 16rpx;height:16rpx;border-radius: 50%;background-color: #4CD964;margin-right: 8rpx;"></view>
						在线
					</view>
				</view>
			</view>
			<view style="font-size: 48rpx;display: flex;">
				<view @click="logouta" class="cuIcon-camera" style="margin-right: 20rpx;"></view>
				<view class="cuIcon-add"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
			}
		},
		onLoad() {
			console.log(this.loginUserInfo)
		},
		methods: {
			...mapMutations(['login', 'logout']),
			logouta(){
				this.logout();
			}
		}
	}
</script>

<style scoped>
	
</style>
